<template>
  <a-modal
    title="批量导入"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="blackListImportVisiable">

    <div style="width: 100%">
      <div class="option-area">
        <a-upload
          class="upload-area"
          :fileList="fileList"
          :remove="handleRemove"
          :disabled="fileList.length === 1"
          :beforeUpload="beforeUpload"
          accept=".xlsx">
          <a-button>
            <a-icon type="upload"/>
            选择.xlsx文件
          </a-button>
        </a-upload>

        <div class="button-area">
          <a-button type="primary" @click="downloadTemplate" style="margin-right: .5rem">
            模板下载
          </a-button>
          <a-button
            @click="handleUpload"
            :disabled="fileList.length === 0"
            :loading="uploading">
            {{uploading ? '导入中' : '导入Excel' }}
          </a-button>
        </div>
      </div>
      <a-card :bordered="false" class="card-area">
        <!-- 表格区域 -->
        <a-table ref="TableInfo"
                 :rowKey="record =>record.id"
                 :columns="columns"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange"
                 :scroll="{ x: 4500 }">
        </a-table>
      </a-card>
      <import-result
        @close="handleClose"
        :importData="importData"
        :errors="errors"
        :times="times"
        :importResultVisible="importResultVisible">
      </import-result>
    </div>

  </a-modal>
</template>

<script>

  import ImportResult from './ImportResult'

  export default {

    components: {ImportResult},

    name: "BrandImport",

    data() {
      return {
        fileList: [],
        importData: [],
        times: '',
        errors: [],
        uploading: false,
        importResultVisible: false,
        dataSource: [],
        paginationInfo: null,
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        },
        loading: false
      }
    },

    props: {
      blackListImportVisiable: {
        default: false
      },
      instId: '',
    },

    computed: {
      show: {
        get: function () {
          return this.blackListImportVisiable
        },
        set: function () {
        }
      },
      columns() {
        return [{
          title: '商户编码',
          dataIndex: 'mchntNo',
          scopedSlots: {customRender: 'mchntNo'},
        }, {
          title: '终端类型',
          dataIndex: 'termType',
          scopedSlots: {customRender: 'termType'},
        }, {
          title: '终端厂商',
          dataIndex: 'brandCode',
          scopedSlots: {customRender: 'brandCode'},
        }, {
          title: '终端型号',
          dataIndex: 'modelCode',
          scopedSlots: {customRender: 'modelCode'},
        }, {
          title: '维护开始时间',
          dataIndex: 'startTime',
          scopedSlots: {customRender: 'startTime'},
        }, {
          title: '终端交易发起方式',
          dataIndex: 'termTxnStarWay',
          scopedSlots: {customRender: 'termTxnStarWay'},
        }, {
          title: '条码终端设备类型',
          dataIndex: 'termDevcTp',
          scopedSlots: {customRender: 'termDevcTp'},
        }, {
          title: '布放实体店-省',
          dataIndex: 'termAddrPrvnc',
          scopedSlots: {customRender: 'termAddrPrvnc'},
        }, {
          title: '布放实体店-市',
          dataIndex: 'termAddrCity',
          scopedSlots: {customRender: 'termAddrCity'},
        }, {
          title: '布放实体店-区',
          dataIndex: 'termAddrArea',
          scopedSlots: {customRender: 'termAddrArea'},
        }, {
          title: '布放实体店地址',
          dataIndex: 'shopAttr',
          scopedSlots: {customRender: 'shopAttr'},
        }, {
          title: '布放实体店时间',
          dataIndex: 'shoptime',
          scopedSlots: {customRender: 'shoptime'},
        }, {
          title: 'S/N',
          dataIndex: 'sn',
          scopedSlots: {customRender: 'sn'},
        }, {
          title: '终端联系人',
          dataIndex: 'contactName',
          scopedSlots: {customRender: 'contactName'},
        }, {
          title: '联系人电话',
          dataIndex: 'contactPhone',
          scopedSlots: {customRender: 'contactPhone'},
        }, {
          title: '经度',
          dataIndex: 'longitude',
          scopedSlots: {customRender: 'longitude'},
        }, {
          title: '纬度',
          dataIndex: 'latitude',
          scopedSlots: {customRender: 'latitude'},
        }, {
          title: '有效半径（千米）',
          dataIndex: 'effectiveRadius',
          scopedSlots: {customRender: 'effectiveRadius'},
        }, {
          title: '终端代付单笔限额（元）',
          dataIndex: 'termMD',
          scopedSlots: {customRender: 'termMD'},
        }, {
          title: '终端代付单日限额（元）',
          dataIndex: 'termMDS',
          scopedSlots: {customRender: 'termMDS'},
        }, {
          title: '终端代付可用额度（元）',
          dataIndex: 'contactEmail',
          scopedSlots: {customRender: 'contactEmail'},
        }]
      }
    },

    methods: {
      onClose() {
        // this.reset()
        this.fileList = []
        this.$emit('close')
      },

      handleClose() {
        this.importResultVisible = false
      },

      downloadTemplate() {
        this.$download('/admin/merParam/mchntBlackListInfo/downloadTemplate', {}, 'blacklistImportTemplate.xlsx')
      },

      handleRemove(file) {
        if (this.uploading) {
          this.$message.warning('文件导入中，请勿删除')
          return
        }
        const index = this.fileList.indexOf(file)
        const newFileList = this.fileList.slice()
        newFileList.splice(index, 1)
        this.fileList = newFileList
      },
      beforeUpload(file) {
        this.fileList = [...this.fileList, file]
        return false
      },
      handleUpload() {
        const {fileList} = this
        const formData = new FormData()
        formData.append('file', fileList[0])
        formData.append('instId', this.instId)
        this.uploading = true
        this.$upload('/admin/merParam/mchntBlackListInfo/import', formData).then((r) => {
          let data = r.data.data
          if (data.data.length) {
            this.fetch()
          }
          this.importData = data.data
          this.errors = data.error
          this.times = data.time / 1000
          this.uploading = false
          this.fileList = []
          this.importResultVisible = true
        }).catch((r) => {
          console.error(r)
          this.uploading = false
          this.fileList = []
        })
      },
      handleTableChange(pagination, filters, sorter) {
        this.paginationInfo = pagination
        this.fetch()
      },
      fetch(params = {}) {
        this.loading = true
        if (this.paginationInfo) {
          this.$refs.TableInfo.pagination.current = this.paginationInfo.current
          this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
          params.pageSize = this.paginationInfo.pageSize
          params.pageNum = this.paginationInfo.current
        } else {
          params.pageSize = this.pagination.defaultPageSize
          params.pageNum = this.pagination.defaultCurrent
        }
        this.$get('/admin/merParam/mchntBlackListInfo/importResult', {
          ...params
        }).then((r) => {
          let data = r.data
          const pagination = {...this.pagination}
          pagination.total = data.total
          this.loading = false
          this.dataSource = data.rows
          this.pagination = pagination
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../../../static/less/Common";

  .option-area {
    display: inline-block;
    width: 100%;
    padding: 0 .9rem;
    margin: .5rem 0;

    .upload-area {
      display: inline;
      float: left;
      width: 50%
    }

    .button-area {
      margin-left: 1rem;
      display: inline;
      float: right;
      width: 30%;
    }
  }
</style>




